<script>
import tree from '@/mixins/tree/index.js'
import AjaxStore from '@/utils/store/proxyAjax'
import DialogForm from '@/components/DialogForm'
import ButtonList from '@/components/ButtonList'
import DeptmentImport from './deptmentImport/deptmentImport.vue'
// import PageTree from '@/PageTree'

import request from '@/utils/request'
import { validateNumber } from '@/utils/validate'
import store from './store'

export default {
  name: 'deptment',
  mixins: [tree, store],
  provide() {
    return {
      deptment: this
    }
  },
  components: {
    DialogForm,
    DeptmentImport,
    ButtonList
  },
  data() {
    const validateOrderNo = (rule, value, callback) => {
      if (value && !validateNumber(value)) {
        callback(new Error('请输入正整数'))
      } else {
        callback()
      }
    }
    return {
      editPid: '',
      groupId: '1',
      deptName: '',
      fullPath: '',
      projectId: this.$store.getters.projectId || '',
      // tree
      tree: {
        width: '280',
        accordion: false,
        isShowHeader: true,
        treeMenuButtonList: !this.$store.getters.projectId
          ? this.treeMenuBtns
          : this.treeMenuBtnsImport,
        treeOperateButtonList: this.treeOperateBtns,
        showCheckbox: false,
        isShowImport: !!this.$store.getters.projectId,
        selectTree: {
          // disabled: true,
          // treeParams: {
          //   get: {
          //     url: "/v1/dataProvider/getGroupTreeList",
          //     idKey: "id",
          //     nextNodeKey: "pid"
          //   }
          // },
          // valueToLabelParams: {
          //   url: '/v1/dataProvider/getGroupName',
          //   idKey: 'groupId'
          // },
          // // isLoadAllNode: false,
          // selectCodeVal: this.$store.getters.groupId || '',
          // selectCodeKey: 'groupId',
          // clearable: false,
          // visibleChangeLoad: false
        },
        nextNodeKey: 'node',
        idKey: 'deptId',
        search: {
          searchKey: 'deptName'
        },
        title: '部门信息',
        getNextChildNode: this.getNextNode,
        delNode: this.delNode
      },

      pidKey: 'pid',
      idKey: 'deptId',
      labelKey: 'deptName',
      nodeCheckedKey: 'checked',
      nodeChildrenKey: 'children',
      nodeLeafKey: 'leaf',
      nodeIdKey: 'id',
      nodeLabelKey: 'text',

      currentNode: null,
      treeTitle: '部门信息',

      dialogFormType: '',
      dialogImportTitle: '部门导入',

      addNodeInfoUrl: '/v1/sys/deptment/add',
      updateNodeInfoUrl: '/v1/sys/deptment/update',
      getNextNodeUrl: '/v1/sys/deptment/findNextChildNodeTree?groupId=1',
      delNodeUrl: '/v1/sys/deptment/deleteNode',
      getNodeInfoUrl: '/v1/sys/deptment/findById',
      importDeptmentUrl: '/v1/sys/deptment/importDeptment',
      getGroupNameUrl: '/v1/dataProvider/getGroupName',
      getDeptNameUrl: '/v1/dataProvider/getDeptName',
      store: new AjaxStore({
        url: '/v1/sys/deptment/query'
      }),

      formPanel: {
        add: {
          model: {
            projectId: '',
            deptId: '',
            groupId: '1',
            pid: '',
            deptCode: '（自动生成）',
            deptName: '',
            fullName: '',
            shortName: '',
            fullPath: '',
            orderNo: '',
            deptFunction: '',
            deptType: '',
            telephone: '',
            buildDate: '',
            dataStatus: 1,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            remark: '',
            areaId: '',
            deptLevel: '',
            contacts: ''
          },
          // 新增的时候 所属机构的树
          fields: [
            // {
            //   label: '所属机构',
            //   prop: 'groupId',
            //   xType: 'SelectTree.TREE',
            //   disabled: true,
            //   anchor: 24,
            //   ref: 'addGroup',
            //   relatedFields: ['addDeptment', 'addDeptPath'],
            //   placeholder: '请选择所属机构',
            //   treeParams: {
            //     get: {
            //       url: "/v1/dataProvider/getGroupTreeList",
            //       nextNodeKey: "pid",
            //       idKey: "id"
            //     }
            //   },
            //   valueToLabelParams: {
            //     url: '/v1/dataProvider/getGroupName',
            //     idKey: 'groupId'
            //   },
            //   clearable: false,
            //   visibleChangeLoad: false,
            //   selectCodeVal: this.$store.getters.groupId || '',
            //   selectCodeKey: 'groupId'
            //   // on: {
            //   //   "visible-change": val =>
            //   //     val && this.$refs.addForm.$refs.addGroup.reload()
            //   // }
            // },
            {
              label: '上级部门',
              prop: 'pid',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'addDeptment',
              relatedFields: ['addDeptPath'],
              placeholder: '请选择上级部门',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // 值,当前组件,关联组件
                  form.model.pid = ''
                  ctx.reload({ groupId: '1' })
                },
                'visible-change': val =>
                  val && this.$refs.addForm.$refs.addDeptment.reload()
              },
              treeParams: {
                get: {
                  getNextNode: this.getDeptmentTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getDeptName',
                idKey: 'deptId'
              }
            },
            {
              label: '部门编码',
              prop: 'deptCode',
              placeholder: '输入部门编码',
              anchor: 24
            },
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '输入部门名称',
              anchor: 24,
              on: {
                input: val => {
                  this.deptName = val
                  if (!this.formPanel.add.model.pid) {
                    this.formPanel.add.model.fullPath = this.filterArray([
                      this.deptName
                    ]).join('/')
                  } else {
                    const selectDeptLabel = this.$refs.addForm.$refs.addDeptment
                      .selectedLabel
                    this.formPanel.add.model.fullPath = this.filterArray([
                      this.getFrontStr(this.fullPath, selectDeptLabel),
                      this.deptName
                    ]).join('/')
                  }
                }
              }
            },
            {
              label: '机构全称',
              prop: 'fullName',
              placeholder: '输入机构全称',
              anchor: 24
            },
            {
              label: '机构简称',
              prop: 'shortName',
              placeholder: '输入机构简称',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '输入排序号',
              anchor: 24
            },
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              'active-value': 1,
              'inactive-value': 0,
              anchor: 24
            },
            {
              label: '备注',
              prop: 'remark',
              placeholder: '输入备注',
              anchor: 24
            },
            // {
            //   label: '行政区域',
            //   prop: 'areaId',
            //   placeholder: '请选择行政区划',
            //   xType: 'SelectConfig',
            //   isLocal: false,
            //   getData: () => {
            //     return request({
            //       url: '/v1/sys/user4sec/getSysDictionaryList',
            //       method: 'get',
            //       params: {
            //         typeCode: 'area_code'
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         }
            //       })
            //     })
            //   }
            // },
            // {
            //   label: '部门等级',
            //   prop: 'deptLevel',
            //   placeholder: '请选择部门等级',
            //   xType: 'SelectConfig',
            //   isLocal: false,
            //   getData: () => {
            //     return request({
            //       url: '/v1/sys/user4sec/getSysDictionaryList',
            //       method: 'get',
            //       params: {
            //         typeCode: 'dept_level_code'
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         }
            //       })
            //     })
            //   }
            // },
            // {
            //   label: '联系人',
            //   prop: 'contacts',
            //   placeholder: '请输入负责人名称',
            //   anchor: 24
            // },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '请输入负责人电话',
              anchor: 11,
              maxlength: 11
            },
            {
              label: '全路径',
              prop: 'fullPath',
              anchor: 24,
              readonly: true,
              style: 'border: 0;',
              ref: 'addDeptPath',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // const option = origin.getOption(val)
                  const attrs = origin.$attrs
                  if (attrs.prop === 'groupId') {
                    // 没有上级结构
                    if (!form.model.pid) {
                      form.model.fullPath = this.filterArray([
                        form.model.deptName
                      ]).join('/')
                    }
                  } else if (attrs.prop === 'pid') {
                    if (form.model.pid) {
                      this.getNodeInfo({ deptId: form.model.pid }).then(
                        ({ success, data }) => {
                          if (success && data.fullPath) {
                            // 获取上级机构全路径
                            this.fullPath = data.fullPath
                            this.formPanel.add.model.fullPath = this.filterArray(
                              [
                                this.getFrontStr(
                                  this.fullPath,
                                  origin.selectedLabel
                                ),
                                form.model.deptName
                              ]
                            ).join('/')
                          }
                        }
                      )
                    } else {
                      form.model.fullPath = this.filterArray([
                        form.model.deptName
                      ]).join('/')
                    }
                  }
                }
              }
            }
          ],
          rules: {
            groupId: [
              { required: true, message: '请选择所属机构', trigger: 'blur' }
            ],
            deptId: [
              { required: true, message: '请输入部门ID', trigger: 'blur' }
            ],
            deptCode: [
              { required: true, message: '请输入部门编码', trigger: 'blur' }
            ],
            deptName: [
              { required: true, message: '请输入部门名称', trigger: 'blur' }
            ],
            dataStatus: [
              { required: true, message: '请输入状态', trigger: 'blur' }
            ],
            orderNo: [{ validator: validateOrderNo, trigger: 'blur' }],
            areaId: [
              { required: true, message: '请选择行政区划', trigger: 'blur' }
            ],
            telephone: [
              {
                pattern: /^1\d{10}$/,
                message: '请输入正确的手机号',
                trigger: 'blur'
              }
            ]
          },
          title: '新增部门信息',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: this.addBtns
        },
        edit: {
          model: {
            projectId: '',
            deptId: '',
            groupId: '1',
            pid: '',
            deptCode: '',
            deptName: '',
            fullName: '',
            shortName: '',
            fullPath: '',
            orderNo: '',
            deptFunction: '',
            deptType: '',
            telephone: '',
            buildDate: '',
            dataStatus: 0,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            remark: '',
            areaId: '',
            deptLevel: '',
            contacts: ''
          },
          fields: [
            // {
            //   label: '所属机构',
            //   prop: 'groupId',
            //   xType: 'SelectTree.TREE',
            //   anchor: 24,
            //   ref: 'editGroup',
            //   disabled: true,
            //   relatedFields: ['editDeptment', 'editDeptPath'],
            //   placeholder: '请选择所属机构',
            //   treeParams: {
            //     // get: {
            //     //   url: "/v1/dataProvider/getGroupTreeList",
            //     //   nextNodeKey: "pid",
            //     //   idKey: "id"
            //     // }
            //   },
            //   valueToLabelParams: {
            //     url: '/v1/dataProvider/getGroupName',
            //     idKey: 'groupId'
            //   },
            //   clearable: false,
            //   visibleChangeLoad: false
            //   // on: {
            //   //   "visible-change": val =>
            //   //     val && this.$refs.editForm.$refs.editGroup.reload()
            //   // }
            // },
            {
              label: '上级部门',
              prop: 'pid',
              xType: 'SelectTree.TREE',
              anchor: 24,
              ref: 'editDeptment',
              relatedFields: ['editDeptPath'],
              placeholder: '请选择上级部门',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // 值,当前组件,关联组件
                  form.model.pid = ''
                  ctx.reload({ groupId: '1' })
                },
                update: (val, vnode, form) => {
                  const selfId = this.editPid
                  const $tree = vnode.$refs.tree
                  const path = $tree.getNodePath(val) || []
                  for (let i = 0, len = path.length; i < len; i++) {
                    if (selfId === path[i]['id']) {
                      form.model.pid = ''
                      this.$message({
                        type: 'error',
                        message: '部门信息上级部门不能选择自身！'
                      })
                      break
                    }
                  }
                },
                'visible-change': val =>
                  val && this.$refs.editForm.$refs.editDeptment.reload()
              },
              treeParams: {
                get: {
                  getNextNode: this.getDeptmentTree
                }
              },
              valueToLabelParams: {
                url: '/v1/dataProvider/getDeptName',
                idKey: 'deptId'
              }
            },
            {
              label: '部门编码',
              prop: 'deptCode',
              placeholder: '请输入部门编码',
              anchor: 24
            },
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '请输入部门名称',
              anchor: 24,
              on: {
                input: val => {
                  this.deptName = val
                  if (!this.formPanel.edit.model.pid) {
                    this.formPanel.edit.model.fullPath = this.filterArray([
                      this.deptName
                    ]).join('/')
                  } else {
                    const selectDeptLabel = this.$refs.editForm.$refs
                      .editDeptment.selectedLabel
                    this.formPanel.edit.model.fullPath = this.filterArray([
                      this.getFrontStr(this.fullPath, selectDeptLabel),
                      this.deptName
                    ]).join('/')
                  }
                }
              }
            },
            {
              label: '机构全称',
              prop: 'fullName',
              placeholder: '请输入机构全称',
              anchor: 24
            },
            {
              label: '机构简称',
              prop: 'shortName',
              placeholder: '请输入机构简称',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '请输入排序号',
              anchor: 24
            },
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              'active-value': 1,
              'inactive-value': 0,
              anchor: 24
            },
            // { label: '状态', prop: 'dataStatus', xType: 'SelectCode.ENABLED', placeholder: '输入状态', anchor: 24},
            {
              label: '备注',
              prop: 'remark',
              placeholder: '请输入备注',
              anchor: 24
            },
            // {
            //   label: '行政区域',
            //   prop: 'areaId',
            //   placeholder: '请选择行政区划',
            //   xType: 'SelectConfig',
            //   isLocal: false,
            //   getData: () => {
            //     return request({
            //       url: '/v1/sys/user4sec/getSysDictionaryList',
            //       method: 'get',
            //       params: {
            //         typeCode: 'area_code'
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         }
            //       })
            //     })
            //   }
            // },
            // {
            //   label: '部门等级',
            //   prop: 'deptLevel',
            //   placeholder: '请选择部门等级',
            //   xType: 'SelectConfig',
            //   isLocal: false,
            //   getData: () => {
            //     return request({
            //       url: '/v1/sys/user4sec/getSysDictionaryList',
            //       method: 'get',
            //       params: {
            //         typeCode: 'dept_level_code'
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         }
            //       })
            //     })
            //   }
            // },
            // {
            //   label: '联系人',
            //   prop: 'contacts',
            //   placeholder: '请输入负责人名称',
            //   anchor: 24
            // },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '请输入负责人电话',
              anchor: 11,
              maxlength: 11
            },
            {
              label: '全路径',
              prop: 'fullPath',
              anchor: 24,
              readonly: true,
              style: 'border: 0;',
              ref: 'editDeptPath',
              on: {
                'el.form.update': (val, ctx, origin, form) => {
                  // const option = origin.getOption(val)
                  const attrs = origin.$attrs
                  if (attrs.prop === 'groupId') {
                    // 没有上级结构
                    if (!form.model.pid) {
                      form.model.fullPath = this.filterArray([
                        form.model.deptName
                      ]).join('/')
                    }
                  } else if (attrs.prop === 'pid') {
                    if (form.model.pid) {
                      this.getNodeInfo({ deptId: form.model.pid }).then(
                        ({ success, data }) => {
                          if (success && data.fullPath) {
                            // 获取上级机构全路径
                            this.fullPath = data.fullPath
                            this.formPanel.edit.model.fullPath = this.filterArray(
                              [
                                this.getFrontStr(
                                  this.fullPath,
                                  origin.selectedLabel
                                ),
                                form.model.deptName
                              ]
                            ).join('/')
                          }
                        }
                      )
                    } else {
                      form.model.fullPath = this.filterArray([
                        form.model.deptName
                      ]).join('/')
                    }
                  }
                }
              }
            }
          ],
          rules: {
            groupId: [
              { required: true, message: '请选择所属机构', trigger: 'blur' }
            ],
            deptId: [
              { required: true, message: '请输入部门ID', trigger: 'blur' }
            ],
            deptCode: [
              { required: true, message: '请输入部门编码', trigger: 'blur' }
            ],
            deptName: [
              { required: true, message: '请输入部门名称', trigger: 'blur' }
            ],
            dataStatus: [
              { required: true, message: '请输入状态', trigger: 'blur' }
            ],
            orderNo: [{ validator: validateOrderNo, trigger: 'blur' }],
            areaId: [
              { required: true, message: '请选择行政区划', trigger: 'blur' }
            ],
            telephone: [
              {
                pattern: /^1\d{10}$/,
                message: '请输入正确的手机号',
                trigger: 'blur'
              }
            ]
          },
          title: '编辑部门信息',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: this.editBtns
        },
        look: {
          model: {
            projectId: '',
            deptId: '',
            groupId: '',
            groupName: '',
            pid: '',
            pName: '',
            deptCode: '',
            deptName: '',
            fullName: '',
            shortName: '',
            fullPath: '',
            orderNo: '',
            deptFunction: '',
            deptType: '',
            telephone: '',
            buildDate: '',
            dataStatus: 0,
            json: '',
            version: '',
            creator: '',
            createdTime: '',
            updator: '',
            updatedTime: '',
            remark: '',
            areaId: '',
            deptLevel: '',
            contacts: ''
          },
          fields: [
            // {
            //   label: '所属机构',
            //   prop: 'groupName',
            //   anchor: 24,
            //   placeholder: '',
            //   disabled: true
            // },
            {
              label: '上级部门',
              prop: 'pName',
              anchor: 24,
              placeholder: '',
              disabled: true
            },
            {
              label: '部门编码',
              prop: 'deptCode',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '部门名称',
              prop: 'deptName',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '机构全称',
              prop: 'fullName',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '机构简称',
              prop: 'shortName',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            {
              label: '状态',
              prop: 'dataStatus',
              xType: 'switch',
              'active-value': 1,
              'inactive-value': 0,
              anchor: 24,
              disabled: true
            },
            {
              label: '备注',
              prop: 'remark',
              placeholder: '',
              anchor: 24,
              disabled: true
            },
            // {
            //   label: "行政区域",
            //   prop: "areaId",
            //   placeholder: "请选择行政区划",
            //   xType: "SelectConfig",
            //   isLocal: false,
            //   disabled: true,
            //   getData: () => {
            //     return request({
            //       url: "/v1/sys/user4sec/getSysDictionaryList",
            //       method: "get",
            //       params: {
            //         typeCode: "area_code"
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         };
            //       });
            //     });
            //   }
            // },
            // {
            //   label: "部门等级",
            //   prop: "deptLevel",
            //   placeholder: "请选择部门等级",
            //   xType: "SelectConfig",
            //   isLocal: false,
            //   disabled: true,
            //   getData: () => {
            //     return request({
            //       url: "/v1/sys/user4sec/getSysDictionaryList",
            //       method: "get",
            //       params: {
            //         typeCode: "dept_level_code"
            //       }
            //     }).then(({ data }) => {
            //       return data.map(item => {
            //         return {
            //           value: item.id,
            //           label: item.codeName,
            //           ...item
            //         };
            //       });
            //     });
            //   }
            // },
            // {
            //   label: '联系人',
            //   prop: 'contacts',
            //   placeholder: '请输入负责人名称',
            //   anchor: 24,
            //   disabled: true
            // },
            {
              label: '联系电话',
              prop: 'telephone',
              placeholder: '请输入负责人电话',
              anchor: 11,
              maxlength: 11,
              disabled: true
            },
            {
              label: '全路径',
              prop: 'fullPath',
              anchor: 24,
              readonly: true,
              style: 'border: 0;'
            }
          ],
          rules: {},
          title: '编辑部门信息',
          type: 'LOOK',
          ref: 'lookForm',
          submitBtnList: this.lookBtns
        }
      }
    }
  },
  created() {
    if (this.projectId) {
      this.getNextNodeUrl = '/v1/sys/deptment/findNextChildNodeTree?groupId=1' + "&projectId=" + this.projectId
    }
  },
  methods: {
    getFrontStr(str, reg) {
      return str.split(reg)[0] + reg
    },
    getDeptmentTree(params, data) {
      if (data) {
        params.node = data['id']
      }
      params.groupId = '1'
      return request({
        url: '/v1/dataProvider/getDeptmentTreeList',
        method: 'get',
        params: params
      })
    },
    filterArray(arr) {
      return arr.filter(val => !(!val || val === ''))
    },
    getFullPath(_params, _url) {
      return this.getNodeInfo(...arguments)
    },
    handleNodeEdit(node) {
      node && (this.currentNode = node)

      if (this.currentNode && this.currentNode.data.systemType) {
        this.dialogType = this.formPanel.look.type
        const params = {}
        params[this.idKey] = node.data[this.nodeIdKey]
        this.getNodeInfo(params)
          .then(({ data }) => {
            this.$refs.lookForm && this.$refs.lookForm.resetFields()
            const deptData = data
            deptData.fullPath = deptData.fullPath
              ? deptData.fullPath
              : '' + deptData.deptName
            Object.keys(this.formPanel.look.model).forEach(key => {
              this.$set(this.formPanel.look.model, key, '')
            })
            Object.keys(deptData).forEach(key => {
              this.$set(this.formPanel.look.model, key, deptData[key])
            })
            data.groupId &&
              this.getGroupName({ groupId: '1' }).then(({ success, data }) => {
                if (success) {
                  this.formPanel.look.model.groupName = data
                }
              })
            data.pid &&
              this.getDeptName({ deptId: data.pid }).then(
                ({ success, data }) => {
                  if (success) {
                    this.formPanel.look.model.pName = data
                  }
                }
              )
          })
          .catch(err => console.log(err))
      } else {
        const params = {}
        params[this.idKey] = node.data[this.nodeIdKey]
        this.getNodeInfo(params)
          .then(({ data }) => {
            data.fullPath = data.fullPath ? data.fullPath : '' + data.deptName
            this.$refs.editForm && this.$refs.editForm.resetFields()
            Object.keys(this.formPanel.edit.model).forEach(key => {
              this.$set(this.formPanel.edit.model, key, '')
            })
            Object.keys(data).forEach(key => {
              this.$set(this.formPanel.edit.model, key, data[key])
            })
            if (this.projectId) {
              this.$set(this.formPanel.edit.model, "projectId", this.projectId)
            }
            this.fullPath = data.fullPath ? data.fullPath : ''
            this.renderTreeCheckCallback()
            this.dialogType = this.formPanel.edit.type
          })
          .catch(err => console.log(err))
      }
    },
    handleNodeAdd(node) {
      Object.assign(this.formPanel.add.model, this.initialAddModel)

      if (node) {
        this.currentNode = node
        this.formPanel.add.model[this.pidKey] = node.data[this.nodeIdKey]
        this.formPanel.add.model.groupId = 1
        const params = {}
        params[this.idKey] = node.data[this.nodeIdKey]
        this.getNodeInfo(params)
          .then(({ data }) => {
            data.fullPath = data.fullPath ? data.fullPath : '' + data.deptName
            this.$set(this.formPanel.add.model, 'fullPath', data.fullPath || '')
            if (this.projectId) {
              this.$set(this.formPanel.add.model, 'projectId', this.projectId)
            }
          })
          .catch(err => console.log(err))
      } else {
        this.formPanel.add.model[this.pidKey] = ''
        this.formPanel.add.model.groupId = '1'
      }
      this.dialogType = this.formPanel.add.type
    },
    handleTreeEmpty() {
      // 当部门数据为空时，右侧表单显示为空
      this.dialogType = ''
    },
    handleTreeSubSelect(_val) {
      this.groupId = '1'
    },
    handleTreeImport() {
      this.dialogFormType = 'IMPORT'
      this.$nextTick(() => {
        this.$refs.deptmentImport.projectId = this.projectId
        this.$refs.deptmentImport.getTreeData()
        this.$refs.deptmentImport.initPage()
      })
    },
    handleImportCancel() {
      this.dialogFormType = ''
      this.$nextTick(() => {
        this.$refs.deptmentImport.refresh()
      })
    },
    handleImportSubmit() {
      const data = {
        deptIds: this.$refs.deptmentImport.getAllCheckedList().join(','),
        isImportPerson: this.$refs.deptmentImport.getIsImportPerson()
      }
      this.dialogFormType = ''

      request({
        url: this.importDeptmentUrl,
        method: 'post',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data
      }).then(({ success, message }) => {
        if (success) {
          this.$refs.tree.load()
          this.$message({
            type: 'success',
            message
          })
        } else {
          this.$message({
            type: 'error',
            message
          })
        }
      })
    },
    handleAddPage() {
      this.$refs.deptmentImport.handleAdd()
    },
    renderTreeCheckCallback() {
      this.editPid = this.formPanel.edit.model.deptId
    },
    // eslint-disable-next-line
    renderCustom(h) {
      return (
        <DialogForm
          closeOnClickModal={false}
          visible={
            // true
            this.dialogFormType === 'IMPORT'
          }
          class='deptment-dialog'
          width='660px'
          title={this.dialogImportTitle}
          on-close={this.handleImportCancel}>
          <DeptmentImport ref='deptmentImport' projectId={this.projectId} />
          <c-form ref='form' slot='footer'>
            <c-form-item class='submit-btn'>
              <ButtonList operateBtnList={this.importBtns} />
            </c-form-item>
          </c-form>
        </DialogForm>
      )
    }
  },
  beforeCreate() {
    // 根据页面路由找出有权限访问的 url 数组
    const urlArr = ((this.$route.meta && this.$route.meta.children) || []).map(
      item => item.url
    )

    // 根据权限 url 数组过滤出能够使用的 按钮数组
    this.addBtns = [
      {
        label: '保存',
        methods: 'handleFormAdd',
        url: '/v1/sys/deptment/add',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.editBtns = [
      {
        label: '保存',
        methods: 'handleFormEdit',
        url: '/v1/sys/deptment/update',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.lookBtns = [
      {
        label: '保存',
        methods: '',
        url: '',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: true
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.importBtns = [
      {
        label: '保存',
        methods: 'handleImportSubmit',
        url: '/v1/sys/deptment/importDeptment',
        icon: 'el-icon-circle-check-outline',
        type: 'primary',
        disabled: false
      },
      {
        label: '取消',
        methods: 'handleImportCancel',
        url: '',
        icon: 'el-icon-circle-close-outline',
        disabled: false
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.treeMenuBtns = [
      {
        label: '新增',
        methods: 'handleMenuAdd',
        url: '/v1/sys/deptment/add',
        icon: 'el-icon-circle-plus-outline',
        type: 'text',
        action: 'plus'
      },
      {
        label: '刷新',
        methods: 'refresh',
        url: '/v1/sys/deptment/findNextChildNodeTree',
        icon: 'el-icon-refresh',
        type: 'text'
      },
      {
        label: '展开',
        methods: 'expand',
        url: '/v1/sys/deptment/findNextChildNodeTree',
        icon: 'el-icon-rank',
        type: 'text'
      },
      {
        label: '折叠',
        methods: 'fold',
        url: '',
        icon: 'el-icon-arrow-up',
        type: 'text'
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.treeMenuBtnsImport = [
      {
        label: '新增',
        methods: 'handleMenuAdd',
        url: '/v1/sys/deptment/add',
        icon: 'el-icon-circle-plus-outline',
        type: 'text',
        action: 'plus'
      },
      {
        label: '导入',
        methods: 'handleImport',
        url: '/v1/sys/deptment/importDeptment',
        icon: 'el-icon-document',
        type: 'text'
      },
      {
        label: '刷新',
        methods: 'refresh',
        url: '/v1/sys/deptment/findNextChildNodeTree',
        icon: 'el-icon-refresh',
        type: 'text'
      },
      {
        label: '展开',
        methods: 'expand',
        url: '/v1/sys/deptment/findNextChildNodeTree',
        icon: 'el-icon-rank',
        type: 'text'
      },
      {
        label: '折叠',
        methods: 'fold',
        url: '',
        icon: 'el-icon-arrow-up',
        type: 'text'
      }
    ].filter(item => (item.url && urlArr.includes(item.url)) || !item.url)

    this.treeOperateBtns = data => {
      // 根据 systemType 帅选
      let btnList = []
      !data.systemType
        ? (btnList = [
          {
            type: 'text',
            url: '/v1/sys/deptment/add',
            icon: 'el-icon-plus',
            action: 'plus'
          },
          {
            type: 'text',
            url: '/v1/sys/deptment/deleteNode',
            icon: 'el-icon-delete',
            action: 'delete'
          }
        ].filter(
          item => (item.url && urlArr.includes(item.url)) || !item.url
        ))
        : (btnList = [
          {
            type: 'text',
            url: '/v1/sys/deptment/add',
            icon: 'el-icon-plus',
            action: 'plus'
          },
          {
            type: 'text',
            url: '/v1/sys/deptment/deleteNode',
            icon: 'el-icon-remove',
            action: 'delete'
          }
        ].filter(
          item => (item.url && urlArr.includes(item.url)) || !item.url
        ))
      return btnList
    }
  }
}
</script>
<style>
.add-btn {
  position: absolute;
  top: 80px;
  width: 50px;
  height: 50px;
  right: 50px;
  background: #409eff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>
